<template>
  <div class="allessay">
    <header>
      <li>
        <router-link to="/staging"><span>工作台</span></router-link>
      </li>
      &nbsp;
      <li>/</li>
      &nbsp;
      <li>评论管理</li>
    </header>
    <main>
      <div class="top">
        <div class="top-top">
          <a-form
            :model="formState"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-item label="标题：">
              <a-input
                v-model:value="formState.Usename"
                placeholder="请输入标题"
              />
            </a-form-item>

            <a-form-item label="状态：">
              <a-select v-model:value="formState.regions">
                <a-select-option value="已发布">已发布</a-select-option>
                <a-select-option value="草稿">草稿</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="分类：">
              <a-select v-model:value="formState.region">
                <a-select-option value="111">111</a-select-option>
                <a-select-option value="222">222</a-select-option>
                <a-select-option value="333">333</a-select-option>
                <a-select-option value="444">444</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </div>
        <div class="top-bottom">
          <div style="width: 240px">
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit">搜索</a-button>
              <a-button style="margin-left: 10px" @click="resetting"
                >重置</a-button
              >
            </a-form-item>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="m-top">
          <a-popover>
            <template #content>
              <p color="#fff">刷新</p>
            </template>
            <a href=""><ReloadOutlined /></a>
          </a-popover>
        </div>
        <div class="m-middle">
          <a-table
            :columns="columns"
            :data-source="state.data"
            :scroll="{ x: 1300 }"
            :row-selection="rowSelection"
          >
            <template #action0>
              <div style="display: flex; align-items: center">
                <li class="li"></li>
                已发布
              </div>
            </template>
            <template #action>
              <div style="display: flex; justify-content: space-around">
                <a @click="gotoText">编辑</a><a>首焦推荐</a
                ><a>
                  <a @click="showModal">查看访问</a>
                  <a-modal
                    v-model:visible="visible"
                    title="回复评论"
                    @ok="handleOk"
                    cancelText="取消"
                    okText="回复"
                  >
                    <a-textarea
                      v-model:value="value"
                      placeholder="支持 MarkDown"
                      :rows="4"
                    />
                  </a-modal> </a
                ><a>
                  <a-popconfirm
                    title="确认删除这个评论？"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="confirm"
                    @cancel="cancel"
                  >
                    <a href="#">
                      <a>删除</a>
                    </a>
                  </a-popconfirm></a
                >
              </div>
            </template>
          </a-table>
        </div>
      </div>
    </main>
  </div>
</template>
<!-- 对于一家企业来说，拥有一个完整网站是很重要的事情，网站包括前端设计和后端的信息管理。简单来说，前端就是我们当我们打开一个网站的时候，肉眼所能看到的一切，而后台则是我们所看不到的一个信息管理系统。


网站后台管理系统主要是用于对网站前台的信息管理，如文字、图片、影音、和其他日常使用文件的发布、更新、删除等操作，同时也包括会员信息、订单信息、访客信息的统计和管理。简单来说就是对网站数据库和文件的快速操作和管理系统，以使得前台内容能够得到及时更新和调整。 -->
<!-- v-module:v-module其实是一个语法糖
它主要做了两件事


在input中绑定value:value="message"message是自定义的
input本身有个事件叫input，用于监听value的值，在input中监听这个事件，并给它赋值给 -->
<script lang="ts">
import router from '../router/index'
import {
  defineComponent,
  reactive,
  toRaw,
  UnwrapRef,
  onMounted,
  ref
} from 'vue'
import { message } from 'ant-design-vue'

interface FormState {
  Usename: string
  region: string | undefined
  regions: string | undefined
}
const columns = [
  {
    title: '标题',
    width: 150,
    dataIndex: 'title',
    key: 'id',
    fixed: 'left'
  },
  { title: '状态', slots: { customRender: 'action0' }, key: 'id' },
  { title: '分类', dataIndex: 'email', key: 'id' },
  { title: '标签', dataIndex: 'name', key: 'id' },
  { title: '阅读量', dataIndex: 'views', key: 'id' },
  { title: '喜欢数', dataIndex: 'likes', key: 'id' },
  { title: '创建时间', width: 200, dataIndex: 'updateAt', key: 'id' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 270,
    slots: { customRender: 'action' }
  }
]
// 1、企业网站一般作为企业的形象而存在，那么企业网站必须美观精致而有气质；
import { ReloadOutlined } from '@ant-design/icons-vue'
import axios from 'axios'
interface DataItem {
  id: number
  name: string
  address: string
}
// 2、企业网站要能够一目了然的把企业产品，性质给表达出来；
// 3、企业网站应该有产品展示功能，需要交易的还需要有在线订单的电子商务功能。
// 在网站后台管理系统中，有些功能比较简单，有些功能比较复杂，还有一些如同自助建站系统，当然自助建站与网站管理系统的异同还是有一些的。在这些系统中其实并不是功能复杂的就很好，也不是功能比较简单的就很差。因为每一套网站后台管理系统的出现就有他存在的价值，不同的行业，不同的需求，就有不同的市场。
// 功能比较复杂的后台管理系统维护不太方便，而且有些功能完全用不上；而功能比较简单的后台管理系统对于后期维护和升级方面就比较方便。其实无论什么样的网站后台管理系统只要做到在灵活性，维护性，方便操作的解决方案才能引起客户的满意，只有客户满意的网站后台管理系统才是最优秀的系统。
// 现在企业对于网站建设的要求越来越高，很多不想自己浪费人力、财力的公司开始找第三方公司来达到自己网站建设的目的，比如正邦、中科微汇等这样的第三方网站建设公司，这样不公司不仅可以完全满足甲方爸爸的需求，同时也可以为甲方公司省下不少的人力、财力。
const rowSelection = {
  onChange: (
    selectedRowKeys: (string | number)[],
    selectedRows: DataItem[]
  ) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows
    )
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (
    selected: boolean,
    selectedRows: DataItem[],
    changeRows: DataItem[]
  ) => {
    console.log(selected, selectedRows, changeRows)
  }
}
export default defineComponent({
  components: {
    ReloadOutlined
  },
  setup() {
    let state: any = reactive({
      data: []
    })
    onMounted(() => {
      axios.get('https://creationapi.shbwyz.com/api/article').then((res) => {
        let newlist = res.data.data[0].map((item: any, index: number) => {
          return { ...item, key: index }
        })
        state.data = newlist
        console.log(state.data[0])
      })
    })

    // eslint-disable-next-line @typescript-eslint/no-empty-function
    const gotoText = () => {
      router.push('/text')
    }
    const formState: UnwrapRef<FormState> = reactive({
      Usename: '',
      region: '',
      regions: ''
    })
    const onSubmit = () => {
      console.log('submit!', toRaw(formState))
      let newlist = state.data.filter((item: any) =>
        item.title.includes(formState.Usename)
      )
      state.data = newlist
    }
    let resetting = () => {
      formState.Usename = ''
      formState.regions = ''
      formState.region = ''
    }
    const showModal = () => {
      visible.value = true
    }
    const handleOk = (e: MouseEvent) => {
      console.log(e)
      visible.value = false
    }
    const confirm = (e: MouseEvent) => {
      console.log(e)
      message.warning('访客无权进行该操作')
    }

    const cancel = (e: MouseEvent) => {
      console.log(e)
    }
    const visible = ref<boolean>(false)
    const value = ref<string>('')
    return {
      formState,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      rowSelection,
      onSubmit,
      resetting,
      gotoText,
      columns,
      state,
      showModal,
      handleOk,
      confirm,
      cancel,
      visible,
      value
    }
  }
})
</script>

<style lang="scss">
.allessay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  header {
    height: 10%;
    padding-left: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    border-top: 1px solid #eae2e2;

    li {
      cursor: pointer;
      color: #999;

      span {
        color: #999;
      }
    }
  }
  main {
    flex-grow: 1;
    overflow-y: scroll;
    .top {
      width: 97%;
      background: #fff;
      margin: 2% auto;
      padding-top: 20px;

      .top-top {
        display: flex;
        align-items: center;

        .ant-form {
          display: flex;
          justify-content: space-around;

          input {
            width: 200px;
          }

          label {
            width: 100px;
            margin-left: 15px;
          }
        }

        .ant-select-selector {
          width: 200px;
        }

        .ant-select {
          width: 200px;
        }

        .ant-select-arrow {
          float: right;
        }
      }

      .top-bottom {
        display: flex;
        justify-content: flex-end;
      }
    }
    .middle {
      width: 97%;
      height: 260px;
      background: #fff;
      margin: 3% auto;

      .m-top {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
        cursor: pointer;
      }

      .m-middle {
        .li {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #52c41a;
          margin-right: 6px;
        }
      }
    }

    .btn2 {
      margin-left: 13px;
    }
  }
}
.ant-modal-mask {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
